<template>
    <div>
        <el-dialog v-model="visible" title="选择商品" width="60%" @close="handleClose">
            <div class="zw-form-layout">
                <el-form :model="form" inline>
                    <el-form-item label="商品名称" prop="name"
                        ><el-input v-model="form.name" placeholder="请输入商品名称"></el-input
                    ></el-form-item>
                    <el-form-item label="商品ID" prop="contactPerson"
                        ><el-input v-model="form.contactPerson" placeholder="请输入商品名称"></el-input
                    ></el-form-item>
                    <el-form-item><el-button type="primary">搜索</el-button></el-form-item>
                </el-form>
            </div>
            <div style="padding: 16px 0">
                <el-table
                    :data="tableList"
                    border
                    stripe
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                    :row-key="
                        row => {
                            row.id;
                        }
                    "
                    ref="tableRef">
                    <el-table-column type="selection" width="55" v-if="props.multiple" :reserve-selection="true" />
                    <el-table-column fixed="left" label="商品名称" prop="goodsName" min-width="140"
                        ><template v-slot="scope"
                            ><div class="imgcontent">
                                <el-radio
                                    v-model="scope.row.check"
                                    :label="1"
                                    v-if="!props.multiple"
                                    @change="
                                        () => {
                                            changeStatus(scope.$index);
                                        }
                                    "
                                    >{{}}</el-radio
                                >
                                <img
                                    :src="scope.row.materialSrc.length ? scope.row.materialSrc[0].materialSrc : ''"
                                    class="imglogo" />
                                <div class="goods">
                                    <div>{{ scope.row.goodsName }}</div>
                                    <div class="text">￥{{ scope.row.goodsMinPrice }}</div>
                                </div>
                            </div></template
                        ></el-table-column
                    >
                    <el-table-column fixed="left" label="商品ID" prop="id" min-width="140"></el-table-column>
                    <el-table-column fixed="left" label="库存" prop="goodsStock" min-width="140"></el-table-column>
                </el-table>

                <div style="padding-top: 16px">
                    <PaginationVue
                        :pageSize="page.pageSize"
                        :currentPage="page.pageNum"
                        :total="total"
                        @pageChange="pageChange"></PaginationVue>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="operate(1)">取消</el-button>
                    <el-button type="primary" @click="operate(2)">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, watch, nextTick, computed } from 'vue';
import PaginationVue from '@/components/Pagination.vue';
import storage from '@/commons/storage';
import request from '@/request';
const emit = defineEmits(['submit', 'cancel']);
const props = defineProps({
    open: { type: Boolean, default: false },
    goodsid: { type: Array, default: () => [] },
    multiple: { type: Boolean, default: false },
    goodsNo: { type: String, default: '' }
});
const visible = computed(() => props.open);
const tableRef = ref();
const page = reactive({ pageSize: 10, pageNum: 1 });
const total = ref(0);
const tableList = ref([]);
const pageselect = ref([]); //记录本页选中的商品
const newselect = ref([]); //记录新选中的商品
const allSelect = ref([]);
const isclear = ref(false); //判断是清空复选还是回显复选 清空为true
const bannerParam = reactive({ goodsId: '', goodsNo: '' });
const hotgoodsid = ref([]);
const form = reactive({ goodsName: '', goodsId: '' });
const getGoodList = () => {
    let param = { shopId: storage.get('ZW-SHOPID'), ...form, ...page };
    request('queryGoodsListServ', param).then(res => {
        tableList.value = res.data.list;
        total.value = res.data.totalCount;
        if (props.multiple) {
            let allselect = [];
            let allids = [];
            pageselect.value = tableList.value.filter(item => hotgoodsid.value.includes(item.id));
            allselect = [...pageselect.value, ...allSelect.value];
            isclear.value = true;
            tableRef.value.clearSelection();
            isclear.value = false;
            allids = allselect.map(item => item.id);
            const data = tableList.value.filter(item => allids.includes(item.id));
            nextTick(() => {
                data.map(row => {
                    tableRef.value.toggleRowSelection(row, true);
                });
            });
        } else {
            tableList.value.map((item, index) => {
                tableList.value[index] = { ...item, check: 0 };
                if (item.id == bannerParam.goodsId) {
                    tableList.value[index].check = 1;
                }
            });
        }
    });
};
/**获取商品列表数据源 */
const init = () => {
    getGoodList();
};
/**多选选中操作 */
const handleSelectionChange = data => {
    if (!isclear.value) {
        newselect.value = data;
        const pageids = tableList.value.map(item => item.id);
        const newids = pageselect.value.map(item => item.id);
        hotgoodsid.value = hotgoodsid.value.filter(item => !newids.includes(item));
        allSelect.value = allSelect.value.filter(item => !pageids.includes(item.id));
        allSelect.value = [...allSelect.value, ...newselect.value];
    }
};
/**单选选中操作 */
const changeStatus = param => {
    if (!props.multiple) {
        tableList.value.map(item => {
            item.check = 0;
        });
        tableList.value[param].check = 1;
        bannerParam.goodsId = tableList.value[param].id;
        bannerParam.goodsNo = tableList.value[param].goodsNo;
    }
};
/**取消/确定 */
const operate = index => {
    if (index == 1) {
        emit('cancel');
    } else {
        if (!props.multiple) {
            emit('submit', bannerParam);
        } else {
            const allids = allSelect.value.map(item => item.id);
            emit('submit', [...hotgoodsid.value, ...allids]);
        }
    }
};
// 取消操作
const handleClose = () => {
    operate(1);
};
const pageChange = pageNum => {
    page.pageNum = pageNum;
    init();
};
watch(
    () => props.goodsid,
    val => {
        if (!props.multiple) {
            bannerParam.goodsId = val.length ? val[0] : '';
        } else {
            hotgoodsid.value = val;
        }
    }
);
watch(
    () => props.goodsNo,
    val => {
        if (!props.multiple) {
            bannerParam.goodsNo = val;
        }
    }
);
defineExpose({ init });
</script>
<style lang="scss" scoped>
:deep.el-radio {
    margin-right: 14px;
}
.imgcontent {
    display: flex;
    align-items: center;
    .imglogo {
        width: 69px;
        height: 60px;
    }
    .goods {
        padding-left: 9px;
        .text {
            font-size: 14px;
            font-weight: 300;
            color: #fa6a0a;
            line-height: 14px;
        }
    }
}
</style>
